<template>
  <a-layout id="basic-layout" class="layout">
    <a-layout-header>
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        @click="handleClick"
        :defaultSelectedKeys="['1']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">{{msg}}展示</a-menu-item>
        <a-menu-item key="2">用户设置</a-menu-item>
        <a-menu-item key="3">退出账号</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content>
      <a-breadcrumb :style="{padding: '16px 32px 0',background:$route.name=='account'?'rgba(255, 255, 255, 0.2);':'white'}">
        <a-breadcrumb-item v-for="(item) in bread" :key="item">{{item}}</a-breadcrumb-item>
      </a-breadcrumb>
      <a-row v-if="$route.name!='account'" class="header" type="flex">
        <a-col class="header-logo" :span="3">
          <img height="100px" src="../assets/logo.png" />
        </a-col>
        <a-col :span="8">
          <div class="header-title">{{title.name}}</div>
          <div class="header-content">{{title.member}}</div>
          <div class="header-content">{{title.team}}</div>
          <div class="header-content">{{title.manager}}</div>
        </a-col>
        <a-col :span="12" v-if="$route.name=='team'">
          <a-col :span="8">
            <div class="achievement-title">项目</div>
            <div class="achievement-number">举重</div>
          </a-col>
          <a-col :span="8">
            <div class="achievement-title">团队成绩</div>
            <div class="achievement-number">1/10</div>
          </a-col>
          <a-col :span="8">
            <div class="achievement-title">平均成绩</div>
            <div class="achievement-number"></div>
          </a-col>
        </a-col>
      </a-row>
      <div :style="{margin: '20px 30px',height:'60vh'}">
        <router-view></router-view>
      </div>
    </a-layout-content>
    <a-layout-footer
      style="text-align: center;padding:10px 50px"
    >Copyright &copy; 2020 西安类脑感知科技发展有限公司</a-layout-footer>
  </a-layout>
</template>

<script>
export default {
  mounted() {
    const flag = parseInt(this.$route.params.params);
    switch (flag) {
      case 1:
        this.msg = "项目";
        this.bread.push("项目");
        this.title.name = "西安电子科技大学";
        this.title.member = "运动员人数：11";
        this.title.team = "队伍总数：11";
        this.title.manager = "管理员";
        break;
      case 2:
        this.msg = "队伍";
        this.bread.push("项目", "队伍");
        this.title.name = "举重";
        this.title.manager = "管理员手机号：13131313";
        this.title.member = "运动员人数：11";
        this.title.team = "队伍总数：11";
        break;
      case 3:
        this.msg = "运动员";
        this.bread.push("项目", "队伍", "运动员");
        this.title.name = "教练：小王";
        this.title.manager = "管理员手机号：13131313";
        this.title.member = "运动员人数：11";
        break;
      default:
        this.msg = "信息";
        this.bread.push("项目", "队伍", "运动员");
        break;
    }
  },
  data() {
    return {
      msg: "#",
      bread: [],
      title: {
        name: "教练：小王",
        manager: "管理员手机号：13131313",
        member: "运动员人数：11"
      }
    };
  },
  methods: {
    handleClick(e) {
      console.log(e.key);
    }
  }
};
</script>

<style lang="scss">
#basic-layout {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#basic-layout .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 24px 16px 0;
  float: left;
}
.header {
  padding: 10px 32px;
  background: white;
  .header-title {
    font-size: 20px;
    font-weight: 500;

    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 16px;
    flex: auto;
  }
  .header-content {
    color: #b3b3b3;
    font-size: 16px;
  }
  .achievement-title {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 4px;
  }
  .achievement-number {
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 32px;
    margin: 0;
  }
}
</style>
